.projects {
	padding: 0 0 60px 0;
	margin: 0 0 var(--gap-160) 0;
}
.projectsTitle {
	text-align: right;
	margin: 0 0 100px 0;
}
.redAccent {
	color: var(--red-accent);
}

.projectsList {
	display: grid;
	grid-template-columns: repeat(3, 360px);
	grid-template-rows: repeat(2, auto);
	place-content: center;
	gap: 20px;
}

.projectItem {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--gap-md);
	padding: var(--gap-lg) var(--gap-md);
	min-height: 360px;
	border-radius: 4px;
	background-color: var(--bg-clr-secondary);
	box-shadow: var(--box-shadow);
	overflow: auto;
}

.projectDescription {
	flex-grow: 1;
}

.projectLinksBox {
	display: flex;
	gap: 12px;
}

.projectLink {
	cursor: pointer;
	display: inline-block;
}

.projectIcon {
	fill: var(--text-clr-main);
	width: 24px;
	height: 24px;
	transition: fill 0.2s ease-in-out;
}

.projectLink:hover .projectIcon {
	fill: var(--accent-clr);
}

.projectTitle {
	color: var(--accent-clr);
	font-family: var(--ff-heading);
	font-size: var(--fs-md);
}

.projectDescription {
	flex-grow: 1;
}

.projectTech {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: flex-end;
}
.skills {
	font-size: var(--fs-sm);
	line-height: 19px;
	color: var(--text-clr-main);
	background-color: var(--red-accent);
	padding: 4px 8px;
	border-radius: 4px;
}

@media screen and (max-width: 1024px) {
	.projectsList {
		grid-template-columns: repeat(2, 360px);
	}
}

@media (max-width: 769px) {
	.projectsList {
		grid-template-columns: 1fr;
	}
	.projectsTitle {
		text-align: center;
	}
}
